<template>
  <div class="mapCharts">
    <!--    初始化echarts需要个有宽高的盒子-->
    <el-col :span="16">
      <div class="dataBtn">
        <el-radio-group v-model="radio" fill="#e0e0e0" text-color="#000000" @change="dataChange">
          <el-radio-button label="1">累计确诊</el-radio-button>
          <el-radio-button label="2">现存确诊</el-radio-button>
        </el-radio-group>
      </div>
      <div ref="mapbox" class="baseCard" style="height:600px;margin:20px 0px"></div>
    </el-col>
    <el-col :span="8">
      <div class="detail baseCard">
        <h3>{{detailData.provinceName}}</h3>
        <div class="detailRow">
          <p class="lab">累计确诊</p>
          <ICountUp class="num" :delay="200" :endVal="detailData.confirmedCount">
          </ICountUp>
          <div class="range pull-right">
            <!--el-icon-caret-left el-icon-caret-right el-icon-caret-bottom el-icon-caret-top-->
            <span v-if="detailData.confirmedIncr>=0">
              <i class="el-icon-caret-top" :style="{color: '#F56C6C', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日新增<span class="mf5 increase">{{detailData.confirmedIncr}}</span>
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" :style="{color: '#67C23A', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日减少<span class="mf5 reduce">{{Math.abs(detailData.confirmedIncr)}}</span>
            </span>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="detailRow">
          <p class="lab">现存确诊</p>
          <ICountUp class="num" :delay="200" :endVal="detailData.currentConfirmedCount">
          </ICountUp>
          <div class="range pull-right">
            <!--el-icon-caret-left el-icon-caret-right el-icon-caret-bottom el-icon-caret-top-->
            <span v-if="detailData.currentConfirmedIncr>=0">
              <i class="el-icon-caret-top" :style="{color: '#F56C6C', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日新增<span class="mf5 increase">{{detailData.currentConfirmedIncr}}</span>
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" :style="{color: '#67C23A', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日减少<span class="mf5 reduce">{{Math.abs(detailData.currentConfirmedIncr)}}</span>
            </span>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="detailRow">
          <p class="lab">输入确诊</p>
          <ICountUp class="num" :delay="200" :endVal="detailData.suspectedCount">
          </ICountUp>
          <div class="range pull-right">
            <!--el-icon-caret-left el-icon-caret-right el-icon-caret-bottom el-icon-caret-top-->
            <span v-if="detailData.suspectedIncr>=0">
              <i class="el-icon-caret-top" :style="{color: '#F56C6C', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日新增<span class="mf5 increase">{{detailData.suspectedIncr}}</span>
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" :style="{color: '#67C23A', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日减少<span class="mf5 reduce">{{Math.abs(detailData.suspectedIncr)}}</span>
            </span>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="detailRow">
          <p class="lab">无症状感染</p>
          <ICountUp class="num" :delay="200" :endVal="detailData.seriousCount">
          </ICountUp>
          <div class="range pull-right">
            <!--el-icon-caret-left el-icon-caret-right el-icon-caret-bottom el-icon-caret-top-->
            <span v-if="seriousCountIncr>=0">
              <i class="el-icon-caret-top" :style="{color: '#F56C6C', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日新增<span class="mf5 increase">{{seriousCountIncr}}</span>
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" :style="{color: '#67C23A', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日减少<span class="mf5 reduce">{{Math.abs(seriousCountIncr)}}</span>
            </span>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="detailRow">
          <p class="lab">治愈</p>
          <ICountUp class="num goodNum" :delay="200" :endVal="detailData.curedCount">
          </ICountUp>
          <div class="range pull-right">
            <!--el-icon-caret-left el-icon-caret-right el-icon-caret-bottom el-icon-caret-top-->
            <span v-if="detailData.curedIncr>=0">
              <i class="el-icon-caret-top" :style="{color: '#67C23A', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日新增<span class="mf5 reduce">{{detailData.curedIncr}}</span>
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" :style="{color: '#F56C6C', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日减少<span class="mf5 increase">{{Math.abs(detailData.curedIncr)}}</span>
            </span>
          </div>
          <el-divider></el-divider>
        </div>
        <div class="detailRow">
          <p class="lab">死亡</p>
          <ICountUp class="num" :delay="200" :endVal="detailData.deadCount">
          </ICountUp>
          <div class="range pull-right">
            <!--el-icon-caret-left el-icon-caret-right el-icon-caret-bottom el-icon-caret-top-->
            <span v-if="detailData.deadIncr>=0">
              <i class="el-icon-caret-top" :style="{color: '#F56C6C', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日新增<span class="mf5 increase">{{detailData.deadIncr}}</span>
            </span>
            <span v-else>
              <i class="el-icon-caret-bottom" :style="{color: '#67C23A', fontSize: '24px',verticalAlign:'middle'}"></i>
              较上日减少<span class="mf5 reduce">{{Math.abs(detailData.deadIncr)}}</span>
            </span>
          </div>
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china'
import '../utils/china.js'
import ICountUp from 'vue-countup-v2'

export default {
  name: 'MapCharts',
  data () {
    return {
      detailData: this.mapChartsData[2],
      mapDatas: [],
      index: 2,
      radio: '1'
    }
  },
  computed: {
    seriousCountIncr () {
      if (this.detailData.currentConfirmedIncr >= 0) {
        return this.detailData.confirmedIncr - this.detailData.currentConfirmedIncr
      } else {
        return this.detailData.confirmedIncr - this.detailData.suspectedIncr
      }
    }
  },
  props: {
    mapChartsData: {
      type: Array,
      default: []
    },
  },
  watch: {
    mapChartsData: {
      handler (newValue, oldValue) {
        this.mapDatas = newValue
        this.detailData = newValue[this.index]
        this.getData()
        console.log(this.mapDatas)
      }
    },
    deep: true
  },
  components: {
    ICountUp
  },
  mounted () { //template挂载到页面时调用
    this.mapDatas = this.mapChartsData
    this.mychart = echarts.init(this.$refs.mapbox);
    this.getData()
    // this.mychart.setOption(option)
    let that = this
    //设置点击事件
    this.mychart.on('click', function (params) {
      that.index = params.dataIndex
      that.detailData = that.mapDatas[that.index];
    });
  },
  methods: {
    getData () {
      let that = this
      const option = {
        title: {
          text: "疫情地图",
        },
        series: [{
          name: "确诊人数",
          type: 'map', //告诉echarts要去渲染一个地图
          map: 'china',
          label: {
            show: true, // 控制对应地区的汉字
            color: '#333',
            fontSize: 10,
          },
          roam: true, //控制地图放大缩小
          zoom: 1.2, //控制地图的放大缩小
          data: [], //用来展示后台给的数据  {name:xx,value:xxx}
          /*      控制地图板块的颜色和边框*/
          itemStyle: {
            areaColor: '#eee',
            borderColor: "green" //边框颜色
          },
          /*     控制鼠标滑过之后的背景色和字体颜色*/
          emphasis: {
            label: {
              color: '#fff',
              fontsize: 12
            },
            itemStyle: {
              areaColor: '#83b5e7'
            }
          }

        }],
        visualMap: [{
          type: 'piecewise',
          show: true,
          // splitNumber:4,
          pieces: [
            //分段
            {
              min: 10000
            },
            {
              min: 1000,
              max: 9990
            },
            {
              min: 100,
              max: 999
            },
            {
              min: 10,
              max: 99
            },
            {
              min: 1,
              max: 9
            },

          ],
          // align:'right'
          //orient:'horizontal' 默认竖直
          //left right 这些属性控制分段所在的位置
          //textStyle() 分段大小
          inRange: {
            symbol: 'rect',
            color: ['#ffc0b1', '#9c0505']
          },
          itemWidth: 20,
          itemHeight: 10
        }],
        tooltip: {
          trigger: 'item', //鼠标移入后显示人数
          formatter: function (params, ticket, callback) {
            var name = params.name;
            var data = params.data;
            if (that.radio == 1) {
              var html = ['<p class="el-icon-location-outline"><span class="mf5">' + name + '</span></p>']
              html.push('<div><span>累计确诊：' + params.value + '</span><span class="mf5">新增：' + data.confirmedIncr +
                '</span></div>')
            } else {
              var html = ['<p class="el-icon-location-outline"><span class="mf5">' + name + '</span></p>']
              html.push('<div><span>现存确诊：' + params.value + '</span><span class="mf5">新增：' + data.confirmedIncr +
                '</span></div>')
            }
            return html.join('');
          }
        }
      }
      let list = []
      if (this.radio == 1) {
        list = this.mapDatas.map((item, index) => ({
          name: item.provinceName,
          value: item.confirmedCount,
          confirmedIncr: item.confirmedIncr,
        }))
      } else {
        list = this.mapDatas.map((item, index) => ({
          name: item.provinceName,
          value: item.currentConfirmedCount,
          confirmedIncr: item.currentConfirmedIncr,
        }))
      }
      option.series[0].data = list;
      this.mychart.setOption(option) //这行代码能执行的前提是DOM已经渲染完成，只有DOM已渲染完成才能echarts初始化
    },
    dataChange () {
      this.getData()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dataBtn {
  float: left;
  z-index: 100;
  position: relative;
  top: 40px;
  left: 200px;
}

.detail {
  height: 600px;
  margin: 20px 0px;
}

.detail .lab {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-right: 20px;
}

.detail .range {
  font-size: 16px;
}

.detail .num {
  position: relative;
  top: 4px;
  color: red;
  font-size: 34px;
  line-height: 34px;
  padding-bottom: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 85%;
  /* color: #00BFFF; */
  font-weight: 600;
  height: 48px;
}

.detail .num.goodNum {
  color: green;
}

.detailRow {
  margin: 10px;
  height: 88px;
}

.detailRow span.increase {
  font-size: 24px;
  font-weight: 600;
  color: salmon;
}

.detailRow .range > span {
  display: inline-block;
  vertical-align: middle;
  height: 53px;
}

.detailRow span.reduce {
  font-size: 24px;
  font-weight: 600;
  color: rgb(57, 167, 57);
}
</style>